<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> 

<style>
    .ui-combobox {
        position: relative;
        display: inline-block;
    }
    .ui-combobox-toggle {
        position: absolute;
        top: 0;
        bottom: 0;
        margin-left: -1px;
        padding: 0;
        /* adjust styles for IE 6/7 */
        *height: 1.7em;
        *top: 0.1em;
    }
    .ui-combobox-input {
        margin: 0;
        padding: 0.3em;
    }
</style>

<div width="950px" style="text-align:left;">
<p>客訴案件數管報及列表 </p>

	<div id="queryBarDiv">
	<form id="f1" action="<c:url value="/report08v2/0801/find.do"/>" method="post">
	
		<!-- 
		<input type="radio" name="searchType" value="mt" checked="checked">
		選擇產地或年度:
		<select name="groupByType" id="groupByType">
			<option value="" >請選擇</option>
			<option value="madein" >產地別</option>
			<option value="year" >年度</option>
		</select> <b>(註:年度的時間計算是以各階段最新一次更新的時間為計算基準,並非開單時間) </b>
		<br>
		<input type="radio" name="searchType" value="time">
		選擇時間區間: <input type="text" name="startDate" id="startDate" value="${startDate}"> ~
		<input type="text" name="endDate" id="endDate" value="${endDate}">
		<b>(註:時間區間的計算是以各階段最新一次更新的時間為計算基準,並非開單時間)</b>
		<br>
		 -->
		 
		<input type="checkbox" id="searchByMT" name="searchByMT" value="mt">		
		<select>
			<option value="madein" selected="selected">產地別</option>			
		</select> <b>(註:年度的時間計算是以各階段最新一次更新的時間為計算基準,並非開單時間) </b>
		<input type="hidden" name="groupByType" id="groupByType" > 
		<br>
		<input type="checkbox" id="searchByTIME" name="searchByTIME" value="time">
		選擇時間區間: <input type="text" name="startDate" id="startDate" value="${startDate}"> ~
		<input type="text" name="endDate" id="endDate" value="${endDate}">
		<b>(註:時間區間的計算是以各階段最新一次更新的時間為計算基準,並非開單時間)</b>
		<br> 
		<input type="hidden" name="searchType" id="searchType">
		
		<br>
		業務/負責人員:
		<input type="text"  name="salesSearch" id="salesSearch" value="${salesSearch}" >
		<input type="hidden"  name="salesID"  id="salesID"  value="${salesId}" >
		(請輸入關鍵字搜尋,至少一個字)
		<br>
		客戶:		
		<input type="text"  id="custSearch" value="${custName}">
		<input type="hidden"  name="custId" id="custId"  value="${custId}" >
		<input type="hidden"  name="custName" id="custName"  value="${custName}">
		(請輸入關鍵字搜尋,至少兩個字)
		<br>
		
		開單人員:		
		<input type="text"  id="usersSearch" value="${userName}">
		<input type="hidden"  name="userId" id="userId" value="${userId}" >
		<input type="hidden"  name="userName" id="userName" value="${userName}">
		(請輸入關鍵字搜尋,至少一個字)		
		<br>		
		
		
		追蹤日期: ${today} <b>(註:今日日期) </b>
		<br>			
		
		<input type="button" id="doSearch" value="搜尋"  >
		
	</form>
	</div>


</div>
 <script>

 $(function() {
 
 $( "#custSearch" ).autocomplete({
		source: '<c:url value="/ajax/cust.do" />',
		minLength: 2,
		select: function( event, ui ) {	
			$('#custId').val(ui.item.postValue);
			$('#custName').val(ui.item.label);
			$(this).val(ui.item.label);
		}	
	});

 $( "#salesSearch" ).autocomplete({
		source: '<c:url value="/ajax/sales.do" />',
		minLength: 1,
		select: function( event, ui ) {	
			$('#salesID').val(ui.item.postValue);
			$(this).val(ui.item.label);
		}	
	});	

 $( "#usersSearch" ).autocomplete({
		source: '<c:url value="/ajax/users.do" />',
		minLength: 1,
		select: function( event, ui ) {	
			$('#userId').val(ui.item.postValue);
			$('#userName').val(ui.item.label);
			$(this).val(ui.item.label);
		}	
	}); 

 
/*	
$('#startDate').attr('disabled','disabled');
$('#endDate').attr('disabled','disabled');
$("input[type='radio'][name='searchType']").click(function(){	
	if($(this).val() =='mt'){
		$('#startDate').attr('disabled','disabled');
		$('#endDate').attr('disabled','disabled');
		$('#startDate').val('');
		$('#endDate').val('');
		$('#groupByType').removeAttr('disabled');
		$('#groupByType').val('madein');
	}else if($(this).val() =='time'){
		$('#startDate').removeAttr('disabled');
		$('#endDate').removeAttr('disabled');
		$('#groupByType').attr('disabled','disabled');
		$('#groupByType').val('');
	}
});
*/

$('#startDate').datepicker({
	dateFormat:"yy-mm-dd",
	changeMonth: true,
	changeYear: true,
	onSelect: function( selectedDate ) {
    $( "#endDate" ).datepicker( "option", "minDate", selectedDate );
    $( "#endDate" ).val(selectedDate);
}
});
$("#startDate").keypress(function(event) {event.preventDefault();});

$('#endDate').datepicker({
	dateFormat:"yy-mm-dd",
	changeMonth: true,
	changeYear: true,
	onSelect: function( selectedDate ) {
    $( "#startDate" ).datepicker( "option", "maxDate", selectedDate );   
}
});
$("#endDate").keypress(function(event) {event.preventDefault();});


<c:if test="${not empty startDate}">
	$("input[type='radio'][value='time']").attr("checked",true);	
	$('#startDate').removeAttr('disabled');
	$('#endDate').removeAttr('disabled');
</c:if>

<c:if test="${not empty searchByMT}">
	$('#searchByMT').attr('checked',true);
</c:if>
<c:if test="${not empty searchByTIME}">
	$('#searchByTIME').attr('checked',true);
</c:if>

//如果不是由'0801'頁面的結果,不顯示 querybar.
<c:if test="${not empty requestFromReport0801 }">
	$('#queryBarDiv').show();
</c:if>
<c:if test="${empty requestFromReport0801 }">
	$('#queryBarDiv').hide();
</c:if>

$('#searchByTIME').change(function(){	
	if(!$('#searchByTIME').attr('checked')){
		$('#startDate').val('');
		$('#endDate').val('');
		$('#startDate').attr('disabled','disabled');
		$('#endDate').attr('disabled','disabled');		
	}else{
		$('#startDate').removeAttr('disabled');
		$('#endDate').removeAttr('disabled');
	};	
});


$('#doSearch').click(function(){
	
	if($('#salesSearch').val() == ''){			
		$('#salesID').val('');
	}

	if($('#custSearch').val() == ''){			
		$('#custId').val('');
		$('#custName').val('');
	}	

	/*
	* Set Search Type value.
	*/	
	var searchType = '';
	if($('#searchByMT').attr("checked")){
		searchType = 'mt';
		$('#groupByType').val('madein');
	};
	if($('#searchByTIME').attr("checked")){
		searchType = 'time';
		$('#groupByType').val('year');
	};	
	if($('#searchByMT').attr("checked") && $('#searchByTIME').attr("checked")){
		searchType = 'mt';
		$('#groupByType').val('madein');
	};	
	if(!$('#searchByMT').attr("checked") && !$('#searchByTIME').attr("checked")){
		searchType = 'mt';
		$('#groupByType').val('madein');
	};
	$('#searchType').val(searchType); 
	

	$('#f1').submit();
	
})

 });
 </script>
    
